<template>
    <div class="page-content">
        <div v-for="item in data" :key="item.id" class="item" :class="{ active: current === item.path }"
            @click="changePage(item)">
            {{ item.name }}
        </div>
    </div>
</template>
<script>
export default {
    name: "Menu",
    data() {
        return {
            current: '/home',
            data: [
                {
                    id: 1,
                    name: "首页",
                    path: "/home"
                },
                {
                    id: 2,
                    name: "插槽",
                    path: "/scop"
                },
                {
                    id: 3,
                    name: "路由",
                    path: "/UrlMode"
                },
            ]
        }
    },
    watch: {
        $route: {
            handler(val) {
                console.log("watch", val);
                this.current = val.path;
            },
        },
    },
    created() {
        this.current = this.$route.path;
    },
    methods: {
        changePage(item) {
            this.current = item.path;
            this.$router.push(item.path)
        },
    },
}
</script>
<style lang="scss">
.page-content {
    .item {
        height: 24px;
        line-height: 24px;
        background: #e5e5e5;
        margin-bottom: 6px;
        padding-left: 10px;
        cursor: pointer;
        &.active {
            background-color: aqua;
        }
    }
}

// 创建权限组件
// Vue.component('Perm', {
//   functional: true,
//   render(h, { props, slots }) {
//     return props.check ? slots().default : null
//   }
// })

// // 使用方式
// <perm :check="$can('article:publish')">
//   <button>发布</button>
// </perm></style>